<template lang="pug">
transition(name="dialog")
  .dialog-mask(v-if="show")
    .dialog
      input(type="text" v-model="loginForm.userName")
      input(placeholder="请输入登录密码" type="password" v-model="loginForm.password")
    .modal-btn(@click="login") 登录
</template>

<script>
import { login, getUserInfo, projectIslandLogin } from 'api'
import { mapState, mapActions } from 'vuex'
import { setCookie } from '@/utils/cookie'
import { hex_md5_salt } from '@/utils/md5'
import { base64decode } from '@/utils/base64'
export default {
  name: 'loginModal',
  props: {
    show: Boolean
  },
  computed: {
    ...mapState({
      loginData: state => state.modal.login
    })
  },
  data () {
    return {
      loginForm: {
        userName: '',
        password: ''
      }
    }
  },
  methods: {
    ...mapActions([
      'changeLogin',
      'changeUserInfo',
      'changeLoginModal'
    ]),
    setStorage (c_name, c_pwd) {
      localStorage.setItem('isRemember', this.checked)
      localStorage.setItem('userName', c_name)
      localStorage.setItem('userPwd', c_pwd)
    },
    //清除cookie
    clearStorage () {
      localStorage.removeItem('isRemember')
      localStorage.removeItem('userName')
      localStorage.removeItem('userPwd')
    },
    async getUserInfo () {
      try {
        const { ResultSet } = await this.$axios.post(getUserInfo)
        if (ResultSet.userData.isCompany) await this.$axios.post(projectIslandLogin)
        this.changeUserInfo(ResultSet.userData)
      } catch (err) {
        console.log(err)
        this.message({ show: true, content: err.message || err.ResultSet.errors })
      }
    },
    async login () {
      try {
        const valid = Object.keys(this.loginForm).every(key => {
          if (!this.loginForm[key]) this.$message.error(warning[key])
          return this.loginForm[key]
        })
        if (!valid) return
        this.loading = true
        const { ResultSet } = await this.$axios.post(login, {...this.loginForm, password: hex_md5_salt(encodeURIComponent(this.loginForm.password))})
        if (ResultSet.userData.type === 1) {
          if (this.avoid) localStorage.setItem('isAvoid', this.avoid)
          if (this.checked) this.setStorage(this.loginForm.userName, this.loginForm.password)
          else this.clearStorage()
          await setCookie('CNPASS', ResultSet.userData.token, this.avoid ? 15 : 7)
          this.getUserInfo()
          this.$emit('close')
          // this.$router.push({ name: 'index' })
        }
      } catch (err) {
        console.log(err)
        this.loading = false
        this.message({ show: true, content: err.message || err.ResultSet.errors })
      }
    },
  }
} 
</script>

<style type="text/css" lang="scss">
.modal-form-item-code {
  .el-input__inner {
    padding-right: 90px;
  }
}
</style>

<style lang="scss" scoped>
.dialog-leave-active {
  transition: opacity .3s ease;
}
.dialog-enter-active,.dialog-leave-active {
  opacity: 0
}
.dialog-enter-active .dialog,
.dialog-leave-active .dialog {
  transform: scale(0);
  opacity: 0;
}
.dialog-mask {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 8888;
  background: rgba(0,0,0,.5)
}
.dialog {
  transition: all .3s;
  position: fixed;
  width: 400px;
  height: 540px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  background: #f5f5f5;
  z-index: 9999;
  border-radius: 5px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
}
.dialog-header {
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  .iconfont {
    font-size: 18px;
    color: #999;
  }
}
.dialog-logo {
  width: 100px;
}
.dialog-content {
  margin-top: 20px;
  text-align: center;
}
.modal-btn {
  font-size: 24px;
  color: #000;
}
</style>
